﻿<template>
  <div class="problem-sets-container">
    <!-- 页面头部 -->
    <div class="problem-sets-header">
      <div class="header-content">
        <div class="title-section">
          <h1 class="main-title">题目集</h1>
          <p class="subtitle">精选题目合集，系统化提升编程技能</p>
        </div>
        <div class="stats-section">
          <div class="stat-item">
            <div class="stat-value">{{ total }}</div>
            <div class="stat-label">题目集总数</div>
          </div>
          <div class="stat-item">
            <div class="stat-value joined">{{ myProblemSets.length }}</div>
            <div class="stat-label">已加入</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ publicProblemSets.length }}</div>
            <div class="stat-label">公开可见</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选和标签页整合容器 -->
    <div class="filter-tabs-container">
      <div class="filter-section">
        <el-input v-model="searchForm.keyword" placeholder="搜索题目集..." prefix-icon="Search" clearable class="search-input" @input="handleSearch" />
      </div>

      <div class="action-section">
        <el-button :type="activeTab === 'public' ? 'primary' : ''" :plain="activeTab !== 'public'" @click="activeTab = 'public'">
          <el-icon><Unlock /></el-icon>
          <span>公开题目集</span>
        </el-button>
        <el-button :type="activeTab === 'my' ? 'primary' : ''" :plain="activeTab !== 'my'" @click="activeTab = 'my'">
          <el-icon><User /></el-icon>
          <span>我加入的题目集</span>
        </el-button>
        <el-button type="primary" @click="handleJoinByCode">
          <el-icon class="el-icon--left"><Connection /></el-icon>
          通过邀请码加入
        </el-button>
      </div>
    </div>

    <!-- 题目集内容 -->
    <div class="problem-sets-content" v-loading="loading">
      <!-- 空数据状态 -->
      <div v-if="!loading && problemSetList.length === 0" class="empty-state">
        <div class="empty-content">
          <h3>{{ activeTab === "my" ? "暂无加入的题目集" : "暂无公开题目集" }}</h3>
          <p>
            {{ activeTab === "my" ? "通过邀请码加入题目集开始学习" : "暂时没有可用的公开题目集" }}
          </p>
          <el-space v-if="activeTab === 'my'">
            <el-button type="primary" @click="handleJoinByCode">通过邀请码加入</el-button>
          </el-space>
        </div>
      </div>

      <!-- 题目集网格 -->
      <div v-else class="problem-sets-grid">
        <ProblemSetCard v-for="set in problemSetList" :key="set.id" :problemSet="set" @click="handleDetail" />
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-wrapper" v-if="total > 0">
      <el-pagination
        v-model:current-page="searchForm.pageNum"
        v-model:page-size="searchForm.pageSize"
        :page-sizes="[12, 24, 36, 48]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 邀请码输入对话框 -->
    <InviteCodeDialog v-model:visible="inviteCodeDialogVisible" :loading="joining" @submit="handleJoinSubmit" />
  </div>
</template>

<script setup>
/**
 * @component ProblemSetList
 * @description 题目集列表页面
 * 遵循项目现有的设计模式和风格
 */

import { computed, onMounted, reactive, ref, watch } from "vue"
import { useRouter } from "vue-router"
import { useProblemSetsStore } from "@/stores/modules/problem-set"
import { Connection, Unlock, User } from "@element-plus/icons-vue"
import ProblemSetCard from "./components/problemSetCard.vue"
import InviteCodeDialog from "./components/inviteCodeDialog.vue"

const router = useRouter()
const problemSetsStore = useProblemSetsStore()

// 数据定义
const activeTab = ref("public")
const loading = computed(() => problemSetsStore.loading)
const total = computed(() => problemSetsStore.total)
const problemSetList = computed(() => problemSetsStore.problemSets)
const myProblemSets = computed(() => problemSetsStore.myProblemSets)
const publicProblemSets = computed(() => problemSetsStore.publicProblemSets)

// 搜索表单
const searchForm = reactive({
  keyword: "",
  type: "PUBLIC", // PUBLIC / MY
  pageNum: 1,
  pageSize: 12
})

// 邀请码相关
const inviteCodeDialogVisible = ref(false)
const joining = ref(false)

// 监听标签页切换
watch(activeTab, val => {
  searchForm.type = val === "public" ? "PUBLIC" : "MY"
  searchForm.pageNum = 1
  loadProblemSets()
})

// 加载题目集列表
const loadProblemSets = async () => {
  await problemSetsStore.getProblemSetList(searchForm)
}

// 搜索处理
const handleSearch = () => {
  searchForm.pageNum = 1
  loadProblemSets()
}

// 分页处理
const handleSizeChange = val => {
  searchForm.pageSize = val
  searchForm.pageNum = 1
  loadProblemSets()
}

const handleCurrentChange = val => {
  searchForm.pageNum = val
  loadProblemSets()
}

// 查看详情
const handleDetail = id => {
  router.push(`/problemSet/${id}`)
}

// 打开邀请码对话框
const handleJoinByCode = () => {
  inviteCodeDialogVisible.value = true
}

// 通过邀请码加入
const handleJoinSubmit = async inviteCode => {
  joining.value = true
  try {
    const result = await problemSetsStore.joinProblemSet(inviteCode)
    if (result.code === 200) {
      inviteCodeDialogVisible.value = false
      // 刷新列表
      if (activeTab.value === "my") {
        loadProblemSets()
      } else {
        activeTab.value = "my"
      }
    }
  } finally {
    joining.value = false
  }
}

// 初始化
onMounted(() => {
  loadProblemSets()
})
</script>

<style lang="scss" scoped>
@use "@/styles/base/variables" as *;
@use "@/styles/base/mixins" as *;
@use "@/styles/components" as *;
@use "@/styles/pages" as *;
@use "sass:color";

.problem-sets-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  background: $bg-color-layout;
  min-height: 100vh;

  // 页面头部样式
  .problem-sets-header {
    @include theme-card;
    background: linear-gradient(135deg, $color-primary-light-9, $bg-color-white);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    color: $color-text-primary;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      @include respond-below(md) {
        flex-direction: column;
        gap: 20px;
        text-align: center;
      }
    }

    .title-section {
      .main-title {
        font-size: 32px;
        font-weight: 700;
        margin: 0 0 8px 0;
      }

      .subtitle {
        font-size: 16px;
        opacity: 0.9;
        margin: 0;
      }
    }

    .stats-section {
      display: flex;
      gap: 32px;

      @include respond-below(md) {
        gap: 20px;
      }

      .stat-item {
        text-align: center;

        .stat-value {
          font-size: 28px;
          font-weight: 700;
          margin-bottom: 4px;
          color: $color-text-primary;

          &.joined {
            color: $color-success;
          }
        }

        .stat-label {
          font-size: 14px;
          color: $color-text-secondary;
        }
      }
    }
  }

  // 筛选和标签页整合容器
  .filter-tabs-container {
    @include theme-card;
    border-radius: $border-radius-lg;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    gap: 20px;
    transition: box-shadow $transition-base;

    &:hover {
      box-shadow: $box-shadow-base;
    }

    @include respond-below(md) {
      flex-direction: column;
      padding: 16px;
      gap: 16px;
    }

    .filter-section {
      flex-shrink: 0;

      @include respond-below(md) {
        width: 100%;
      }

      .search-input {
        width: 280px;

        @include respond-below(md) {
          width: 100%;
        }
      }
    }

    .action-section {
      flex-shrink: 0;
      display: flex;
      gap: 12px;
      align-items: center;

      @include respond-below(md) {
        width: 100%;
        flex-wrap: wrap;

        .el-button {
          flex: 1;
          min-width: 140px;
        }
      }

      .el-button {
        .el-icon {
          margin-right: 4px;
        }
      }
    }
  }

  // 主要内容区域
  .problem-sets-content {
    background: transparent;
    min-height: 500px;
  }

  // 空状态样式
  .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 40px;

    .empty-content {
      text-align: center;

      h3 {
        font-size: 20px;
        font-weight: 600;
        margin: 0 0 8px 0;
        color: $color-text-primary;
      }

      p {
        font-size: 14px;
        margin: 0 0 24px 0;
        color: $color-text-secondary;
      }
    }
  }

  // 网格布局
  .problem-sets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    padding: 0;
    margin-bottom: 0;

    @include respond-below(md) {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 0 16px;
    }
  }

  // 分页样式
  .pagination-wrapper {
    display: flex;
    justify-content: center;
    padding: 12px 0 24px;
    background: transparent;
  }
}
</style>
